<template>
  <div class="admin-login">
    <div class="login-container">
      <div class="form-container">
        <h1>管理员登录</h1>
        <p class="login-subtitle">仅限管理员使用，访客请使用验证密码</p>
        <div class="input-group">
          <el-input 
            v-model="account" 
            placeholder="请输入账号" 
            prefix-icon="User"
          />
        </div>
        <div class="input-group">
          <el-input 
            v-model="password" 
            placeholder="请输入密码" 
            type="password" 
            prefix-icon="Lock"
            @keyup.enter="login"
          />
        </div>
        <div class="login-actions">
          <el-button 
            type="primary" 
            :loading="loading" 
            @click="login"
            class="login-button"
          >
            登录
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { User, Lock } from '@element-plus/icons-vue';
import { useMainStore } from '../../../store';
import { useRouter } from 'vue-router';
import api from '../../../utils/api';
import { encrypt } from '../../../utils/crypto';
import common from '../../../utils/common';

// 响应式状态
const account = ref('');
const password = ref('');
const loading = ref(false);

// 路由和store
const router = useRouter();
const store = useMainStore();

// 登录方法
const login = async () => {
  // 表单验证
  if (!account.value || !password.value) {
    ElMessage({
      message: '请输入账号和密码',
      type: 'warning'
    });
    return;
  }
  
  // 设置加载状态
  loading.value = true;
  
  try {
    // 构建登录参数，参考user.vue的登录机制
    const loginParams = {
      account: account.value.trim(),
      password: common.encrypt(password.value.trim()) // 使用common.encrypt加密密码
    };
    
    // 调用登录API
    const res = await api.admin.login(loginParams);
    
    if (res && res.data) {
      // 登录成功，保存管理员信息
      store.loadCurrentAdmin(res.data);
      
      ElMessage({
        message: '管理员登录成功',
        type: 'success'
      });
      
      // 清空表单
      account.value = '';
      password.value = '';
      
      // 跳转到管理员设置页面
      router.push('/admin/settings');
    }
  } catch (error) {
    console.error('登录失败:', error);
    ElMessage({
      message: error.message || '登录失败，请检查账号和密码',
      type: 'error'
    });
  } finally {
    loading.value = false;
  }
};
</script>

<style scoped>
.admin-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(249, 115, 22, 0.05) 100%);
}

.login-container {
  width: 100%;
  max-width: 400px;
  padding: 2rem;
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.form-container {
  display: flex;
  flex-direction: column;
}

h1 {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #3b82f6, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.login-subtitle {
  text-align: center;
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 1.5rem;
}

.input-group {
  margin-bottom: 1.5rem;
}

.login-actions {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}

.login-button {
  width: 100%;
  padding: 0.75rem;
  font-size: 1.1rem;
  background: linear-gradient(135deg, #3b82f6, #f97316);
  border: none;
  transition: all 0.3s ease;
}

.login-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
</style> 